<template>
	<view>
		<view class="banner">
			<swiper interval="3000" autoplay="true" indicator-dots="true">
				<swiper-item v-for="(item,index) in data.goodsCarouselPictures">
					<view class="banner-img">
						<image :src="item" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-price">
			<view class="price">
				&yen;{{data.price}}
			</view>
			<view class="market-price">
				&yen;{{data.marketPrice}}
			</view>
			<view class="sale">
				{{data.sales_tip}}购买
			</view>
		</view>
		<view class="goods-title">
			{{data.goodsName}}
		</view>
		<view class="goods-detail">
			<image v-for="(item,index) in data.goodsDetailPictures" :src="item" mode="widthFix"></image>
		</view>
		<view class="buy" @click="buy">立即购买</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				source:'',
				data:[]
			}
		},
		onLoad(option) {
			this.id = option.id
			this.source = option.source;
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData(){
				var that = this;
				 this.$api.sendRequest({
					 url:"/supply/api/tuike/detail",
					 data:{
						 id:that.id
					 },
					 success:function(res){
						 that.data = res.data;
						 that.$langConfig.title(res.data.goodsName);
					 }
				 })
			},
			buy(){
				var that = this;
				if(that.source=='pdd' || that.source=='jd'){
					uni.navigateToMiniProgram({
					  appId: that.data.we_app_info.app_id,
					  path: that.data.we_app_info.page_path
					 
					})
				}else{
					uni.setClipboardData({
						data: that.data.tkl,
						success: function () {
							uni.showModal({
								title:"提示",
								content:"已复制口令，请打开对应APP购买"
							})
						}
					});
				}
				
			}
		}
	}
</script>

<style>
	.banner{
		width: 100%;
		height: 750rpx;
	}
	.banner>swiper{
		width: 100%;
		height: 750rpx;
	}
	.banner-img{
		width: 100%;
		height: 750rpx;
	}
	.banner-img image{
		width: 100%;
	}
	.buy{
		width: 80%;
		background-color: crimson;
		color: #fff;
		text-align: center;
		border-radius: 20px;
		height: 40px;
		position: fixed;
		bottom: 10px;
		left: 10%;
		line-height: 40px;
	}
	.goods-title{
		width: 90%;
		padding: 10px 5%;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		line-height: 30px;
	}
	.goods-price{
		width: 90%;
		padding: 5px 5%;
		display: flex;
		height: 40px;
	}
	.price{
		font-size: 16px;
		color: crimson;
		font-weight: bold;
		line-height: 40px;
	}
	.market-price{
		color: #666666;
		font-size: 14px;
		text-decoration: line-through;
		line-height: 45px;
		flex: 1;
	}
	.sale{
		color: #666666;
		font-size: 14px;
		line-height: 45px;
	}
	.goods-detail{
		width: 90%;
		padding: 0 5%;
		font-size: 0;
	}
	.goods-detail image{
		width: 100%;
	}
</style>
